<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户端 - 总报价</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            max-width: 414px;
            margin: 0 auto;
            background: #ffffff;
        }
        .clickable {
            transition: all 0.2s ease;
        }
        .clickable:active {
            transform: scale(0.98);
            opacity: 0.8;
        }
        .card-shadow {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }
        .emphasis-number {
            font-size: 28px;
            font-weight: 700;
        }
    </style>
</head>
<body class="bg-white">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm px-4 py-3 flex items-center">
        <i class="fas fa-arrow-left text-gray-600 text-xl mr-4 clickable" onclick="history.back()"></i>
        <div class="text-lg font-semibold text-gray-800">总报价</div>
    </nav>

    <div class="pb-32">
        <!-- 预计总金额 -->
        <div class="bg-[#6366f1] rounded-lg mx-4 mt-6 p-8 text-center text-white shadow-sm">
            <div class="text-sm mb-2 opacity-90">AI预计总金额</div>
            <div class="text-5xl font-bold">¥15,000</div>
            <div class="text-xs mt-3 opacity-80">基于您的需求初步估算</div>
        </div>

        <!-- 提示信息 -->
        <div class="bg-white rounded-lg mx-4 mt-4 p-4 shadow-sm">
            <div class="flex items-start space-x-3">
                <i class="fas fa-info-circle text-[#6366f1] text-lg mt-0.5"></i>
                <div class="flex-1">
                    <h3 class="text-sm font-semibold text-gray-800 mb-1">温馨提示</h3>
                    <p class="text-xs text-gray-600 leading-relaxed">
                        此金额为AI初步估算，最终报价可能根据您的具体需求细节进行调整。请点击下方按钮填写详细需求，以便我们为您提供更准确的报价。
                    </p>
                </div>
            </div>
        </div>

        <!-- 报价说明 -->
        <div class="bg-white rounded-lg mx-4 mt-4 p-4 shadow-sm">
            <h2 class="text-lg font-bold text-gray-800 mb-3">报价说明</h2>
            <div class="space-y-3">
                <div class="flex items-start space-x-2">
                    <i class="fas fa-check-circle text-green-500 text-sm mt-1"></i>
                    <div class="flex-1">
                        <div class="text-sm text-gray-800 font-medium mb-1">包含服务</div>
                        <div class="text-xs text-gray-600">开发、测试、部署等全部费用</div>
                    </div>
                </div>
                <div class="flex items-start space-x-2">
                    <i class="fas fa-check-circle text-green-500 text-sm mt-1"></i>
                    <div class="flex-1">
                        <div class="text-sm text-gray-800 font-medium mb-1">预计周期</div>
                        <div class="text-xs text-gray-600">根据需求复杂度，预计2-4周完成</div>
                    </div>
                </div>
                <div class="flex items-start space-x-2">
                    <i class="fas fa-check-circle text-green-500 text-sm mt-1"></i>
                    <div class="flex-1">
                        <div class="text-sm text-gray-800 font-medium mb-1">后续支持</div>
                        <div class="text-xs text-gray-600">提供3个月免费技术支持</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部操作按钮 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4" style="max-width: 414px; margin: 0 auto;">
        <button class="bg-[#6366f1] text-white py-3 rounded-lg font-medium w-full clickable" onclick="fillDetailRequirement()">
            <i class="fas fa-edit mr-2"></i>
            获取客户经理支持
        </button>
    </div>

    <script>
        function fillDetailRequirement() {
            // 跳转到填写细节需求页面
            // 这里可以根据实际需求跳转到对应的页面
            window.location.href = 'customer-requirement-submit.html';
            // 或者使用其他跳转方式
            // alert('跳转到填写细节需求页面');
        }
    </script>
</body>
</html>

